<script setup lang="ts">
  import logo from '../assets/logo.png'
  import southeast from '../assets/southeast.jpg'
  const init = () => {
    const stage = new createjs.Stage('londeQueuecanvas')
    let shape = new createjs.Shape()
    const queue = new createjs.LoadQueue()
    queue.installPlugin(createjs.Sound)

    queue.loadManifiest([
      { id: 'cloud', src: logo },
      { id: 'wind', src: southeast }
    ])
    console.log('~~~queue~~~~~~~', queue.getResult('cloud'))

    queue.on('complete', () => {
      console.log('finished loading')
    })
    shape.graphics
      .beginBitmapFill(queue.getResult('cloud'))
      .drawRect(0, 0, 100, 100)
    shape.x = 100
    shape.y = 100
    stage.addChild(shape)

    createjs.Ticker.on('tick', () => {
      stage.update()
    })

    createjs.Tween.get(shape, { loop: true })
      .to({ x: 500 }, 2000, createjs.Ease.getPowInOut(4))
      // .call(playWindSound)
      .to({ x: 100 }, 2000, createjs.Ease.getPowInOut(4))
    // .call(playWindSound);
  }
  onMounted(() => {
    nextTick(() => {
      init()
    })
  })
</script>

<template>
  <div>asdas</div>
  <canvas id="londeQueuecanvas" width="1000" height="1000"></canvas>
</template>

<style scoped lang="scss"></style>
